<template>
  <view>
    <view class="flex-col page">
  <view class="flex-col self-stretch section">
 
    <view class="flex-col mt-19">
      <image
        class="self-start image_4"
        src="/static/bk1.png"
      />
      <image
        class="self-center image_5"
        src="/static/mie/1.png" 
      />
      <view class="flex-col justify-start self-stretch relative section_2">
        <view class="flex-col relative section_6">
          <text class="text_4">给角色注入灵魂！快来输入角色设定，让Ta的世界更加生动有趣...</text>
          <view class="flex-row justify-end items-center group_2">
            <text class="font_3">0/200</text>
            <view class="flex-row items-center ml-19">
              <image
                class="shrink-0 image_8"
                src="https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=cac9aaf62a5b6fcda629050404ecaaef.png"
              />
              <text class="font_3 text_5 ml-3">清空</text>
            </view>
          </view>
          <view class="flex-col justify-start section_7 pos_2">
            <view class="flex-row justify-evenly section_8">
              <text class="font_2 text_3">看看样例</text>
              <image
                class="image_7"
                src="https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=1884d419e66eca60755cc0fc100db73f.png"
              />
            </view>
          </view>
        </view>
        <view class="flex-col justify-start section_3 pos">
          <view class="flex-col justify-start section_4">
            <view class="flex-row justify-evenly items-center section_5">
              <image
                class="image_6"
                src="https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=0f76ca2c17dc5ad360c5fc0d9bb76142.png"
              />
              <text class="font text_2">角色设定</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="flex-col justify-start self-stretch relative section_9">
    <view class="flex-col justify-start items-end relative section_11">
      <view class="group_3"></view>
      <view class="flex-row horiz-list group_4">
        <view class="flex-col horiz-list-item section_12">
          <view class="flex-col justify-start items-center self-start text-wrapper_2">
            <text class="font_2 text_7">密友</text>
          </view>
          <view class="mt-86 flex-col items-center self-stretch section_15">
            <text class="font_4">更亲密的关系，适合分享</text>
            <text class="font_4">更深层次的想法和情感。</text>
          </view>
        </view>
        <view class="flex-col horiz-list-item section_13 ml-11">
          <view class="flex-col justify-start items-center self-start text-wrapper_3">
            <text class="font_2">家人</text>
          </view>
          <view class="mt-86 flex-col justify-start items-center self-stretch text-wrapper_4">
            <text class="font_4 text_9">可以指定具体的家庭成员关系，体验个性化互动。</text>
          </view>
        </view>
        <view class="flex-col horiz-list-item section_14 ml-11">
          <view class="flex-col justify-start items-center self-start text-wrapper_3">
            <text class="font_2 text_8">朋友</text>
          </view>
          <view class="mt-86 flex-col justify-start self-stretch text-wrapper_5">
            <text class="font_4 text_10">自然轻松的对话伙伴，分享日常点滴。</text>
          </view>
        </view>
      </view>
    </view>
    <view class="flex-col justify-start section_10 pos_3">
      <view class="flex-row justify-evenly items-center section_5">
        <image
          class="image_6"
          src="https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=ba2e5a6230c12e7429fd7a353f468263.png"
        />
        <text class="font text_6">角色关系</text>
      </view>
    </view>
  </view>
  <view class="flex-col justify-start self-center section_16">
    <view class="flex-col justify-start relative section_17">
      <view class="section_18"></view>
      <text class="text_11 pos_4">赋予Ta生命</text>
    </view>
  </view>
</view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss" scoped>
.ml-5 {
  margin-left: 10rpx;
}
.mt-19 {
  margin-top: 38rpx;
}
.ml-19 {
  margin-left: 38rpx;
}
.ml-3 {
  margin-left: 6rpx;
}
.ml-11 {
  margin-left: 22rpx;
}
.page {
  padding-bottom: 116rpx;
  background-color: #fefff9;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.section {
  padding: 24rpx 8rpx 404rpx 12rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=b693e5b12f7fd58aeeef666bb20763f6.png');
  background-position: 0% 0%;
  background-size: 750rpx 1624rpx;
  background-repeat: no-repeat;
}
.group {
  padding-left: 28rpx;
  padding-right: 24rpx;
}
.text-wrapper {
  padding: 8rpx 0;
  border-radius: 48rpx;
  width: 108rpx;
  height: 42rpx;
}
.text {
  color: #000000;
  font-size: 30rpx;
  font-family: Alibaba PuHuiTi 2;
  line-height: 21.44rpx;
}
.image {
  width: 34rpx;
  height: 22rpx;
}
.image_2 {
  width: 30rpx;
  height: 22rpx;
}
.image_3 {
  width: 48rpx;
  height: 22rpx;
}
.image_4 {
  margin-left: 20rpx;
  border-radius: 50%;
  width: 52rpx;
  height: 52rpx;
}
.image_5 {
  width: 444rpx;
  height: 444rpx;
}
.section_2 {
  margin-top: 18rpx;
  padding: 24rpx 0 28rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=9f9536229c3719820e4e8322ef39260b.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_6 {
  margin: 0 24rpx;
  padding: 64rpx 32rpx 32rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=c79254d9b305c99b0f93429ed7136228.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.text_4 {
  color: #999999;
  font-size: 28rpx;
  font-family: Source Han Sans SC;
  line-height: 42rpx;
  text-align: justify;
}
.group_2 {
  margin-top: 348rpx;
}
.font_3 {
  font-size: 20rpx;
  font-family: Source Han Sans SC;
  line-height: 19.46rpx;
  color: #999999;
}
.image_8 {
  width: 26rpx;
  height: 22.66rpx;
}
.text_5 {
  line-height: 18.5rpx;
}
.section_7 {
  border-radius: 18rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=79bf73018ebf5dea786c78fadf297c05.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 168rpx;
}
.pos_2 {
  position: absolute;
  right: 0;
  top: 0;
}
.section_8 {
  padding: 12rpx 8rpx 30rpx 40rpx;
  border-radius: 2rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=a3fb0ddf821aec15da13fdf96997afdc.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.font_2 {
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  line-height: 22.2rpx;
  color: #333333;
}
.text_3 {
  color: #666666;
}
.image_7 {
  width: 24rpx;
  height: 24rpx;
}
.section_3 {
  border-radius: 50rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=40afce54c140c4b131ce93404a8f4edb.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 218rpx;
}
.pos {
  position: absolute;
  left: 11.3rpx;
  top: 4.24rpx;
}
.section_4 {
  padding: 2rpx 0;
  border-radius: 50rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=40afce54c140c4b131ce93404a8f4edb.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 218rpx;
}
.section_5 {
  padding: 16rpx 24rpx;
  background-color: #fff6d2;
  border-radius: 50rpx;
}
.image_6 {
  width: 32rpx;
  height: 32rpx;
}
.font {
  font-size: 32rpx;
  font-family: Source Han Sans SC;
  line-height: 30rpx;
  color: #333333;
}
.text_2 {
  line-height: 30.28rpx;
}
.section_9 {
  margin: -408rpx 16rpx 0 24rpx;
  padding: 24rpx 0;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=ba9f4603cea3cf9f7cd83f391dc95ac6.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_11 {
  margin: 0 12rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=8f8866ca4af0bf125c727259e3fc92fc.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.group_3 {
  overflow: hidden;
  border-radius: 40rpx;
  width: 120rpx;
  height: 400rpx;
}
.horiz-list {
  position: absolute;
  left: 30rpx;
  right: -124rpx;
  top: 70rpx;
}
.group_4 {
  overflow-x: auto;
}
.horiz-list-item {
  flex-shrink: 0;
}
.section_12 {
  background-color: #ffffff;
  border-radius: 24rpx;
  width: 254rpx;
  height: 300rpx;
  border-left: solid 2rpx #ffe944;
  border-right: solid 2rpx #ffe944;
  border-top: solid 2rpx #ffe944;
  border-bottom: solid 2rpx #ffe944;
}
.text-wrapper_2 {
  padding: 12rpx 0;
  background-color: #ffe944;
  border-radius: 24rpx 0rpx 24rpx 0rpx;
  width: 84rpx;
}
.text_7 {
  line-height: 22.32rpx;
}
.section_15 {
  padding: 10rpx 0 4rpx;
  background-color: #ffe944;
  border-radius: 0rpx 0rpx 24rpx 24rpx;
}
.font_4 {
  font-size: 20rpx;
  font-family: Source Han Sans SC;
  line-height: 30rpx;
  color: #333333;
}
.section_13 {
  background-color: #ffffff;
  border-radius: 24rpx;
  width: 250rpx;
  height: 296rpx;
}
.text-wrapper_3 {
  padding: 12rpx 0;
  background-color: #f3eedf;
  border-radius: 24rpx 0rpx 24rpx 0rpx;
  width: 84rpx;
}
.text-wrapper_4 {
  padding: 12rpx 0 4rpx;
  background-color: #f3eedf;
  border-radius: 0rpx 0rpx 24rpx 24rpx;
}
.text_9 {
  width: 218rpx;
}
.section_14 {
  background-color: #ffffff;
  border-radius: 24rpx 0 0 24rpx;
  width: 234rpx;
  height: 296rpx;
}
.text_8 {
  line-height: 22.18rpx;
}
.text-wrapper_5 {
  padding: 12rpx 0 4rpx;
  background-color: #f3eedf;
  border-radius: 0rpx 0 0 24rpx;
}
.text_10 {
  margin-left: 12rpx;
}
.section_10 {
  padding: 2rpx 0;
  border-radius: 50rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=7971f1e22d392086f4dbbc609b765ad7.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 218rpx;
}
.pos_3 {
  position: absolute;
  left: 0;
  top: 5.84rpx;
}
.text_6 {
  line-height: 30.14rpx;
}
.section_16 {
  margin-top: 24rpx;
  padding: 4rpx 0;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=68d54807c4fd53463d5b21f810676942.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 506rpx;
}
.section_17 {
  background-color: #fff6d2;
  border-radius: 94rpx 94rpx 84rpx 94rpx;
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=e5844fc0cddae653b9411d705458d5fe.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 504rpx;
}
.section_18 {
  background-image: url('https://ide.code.fun/api/image?token=67860ca64ae84d0012239a83&name=e5844fc0cddae653b9411d705458d5fe.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 112rpx;
}
.text_11 {
  color: #999999;
  font-size: 40rpx;
  font-family: Source Han Sans SC;
  font-weight: 700;
  line-height: 38.28rpx;
}
.pos_4 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
    
      